
<template>
  <div>
    <div style="height:500px;width:500px" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name:'echarts',
  data() {
    return {
      chart: null
    };
  },
  props: {
    // 图表的数据是否远程请求
    mapdata: {
      type: String,
      default: ""
    },
    // 直接从父组件获取
    option: Object
  },
  watch: {
    // 监听父组件传过来的option值
    option(val) {
      if (this.chart) {
        // 是否存在数据，存在则设置值否则清空
        // 这里的setOption()和clear()方法为echart提供的方法，可参照http://www.echartsjs.com/api.html#echarts
        this.option ? this.chart.setOption(val) : this.chart.clear();
      }
    }
  },
  methods: {
    initChart() {
      // 初始化
      this.chart = echarts.init(this.$refs.myEchart);
      // 把配置和数据放这里
      this.chart.setOption(this.option);
    }
  },
  mounted() {
    // 在这里上面定义了一个mapdata,如果存在则发送请求后设置值，方法一样
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose(); // 销毁
    this.chart = null;
  }
};
